#{extends 'head.html' /} #{ set title:'蓝莲花 | 填写订单信息'/}
<script type="text/javascript" src="/public/javascripts/area.js"></script>
<style type="text/css">
div.main_frame {
	height: auto;
	margin: auto;
	overflow: hidden;
	width: 980px;
}

td,p,li,select,input,textarea,div {
	font-size: 12px;
}

ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,img,div {
	border: 0 none;
	margin: 0;
	padding: 0;
}

div.gray_frame {
	border: 1px solid #EAEAEA;
	clear: both;
	height: auto;
	margin-bottom: 15px;
	overflow: hidden;
	padding: 10px;
	width: 958px;
}

div.tab_onfocus {
	background-color: #437EBA;
	border-left: 1px solid #437EBA;
	border-right: 1px solid #437EBA;
	border-top: 1px solid #437EBA;
	color: #FFFFFF;
	cursor: pointer;
	float: left;
	height: 25px;
	line-height: 25px;
	margin-right: 5px;
	overflow: hidden;
	text-align: center;
	width: 115px;
}

div.tab_line {
	background-color: #437EBA;
	clear: both;
	height: 3px;
	overflow: hidden;
}
</style>
<form name="orderD" action="/controllers/Order.order3" onsubmit="return ckform()" method="post">
	<div class="main_frame">
		<div class="car_title">
			<table width="100%" cellspacing="10" cellpadding="0" border="0">
				<tbody>
					<tr>
						<td align="right" height="71">
							<img width="437" height="49" src="/public/orderimg/cart_show1.jpg">
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="gray_frame">
			<div class="tab_frame">
				<div class="tab_onfocus">
					收货人信息
				</div>
			</div>
			<div class="tab_line"></div>
			<div align="center" style="display: block" class="my_frame" id="sid">
				<table width="90%" cellspacing="5" cellpadding="0" border="0">
					<tbody>
						<tr>
							<td align="right" width="100" height="25">
								<span class="red">*</span>&nbsp;收货人姓名：
							</td>
							<td align="left">
								<table width="100%" cellspacing="0" cellpadding="0" border="0">
									<tbody>
										<tr>
											<td width="240" height="25">
												<input onblur="ckshr($(this))" type="text" value="${user?.memnum}" class="edit_input" id="name" name="username">
												<span style="color: Red; display: none;" id="RequiredFieldValidator1">*</span>
											</td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
						<tr>
							<td align="right" width="100" height="25">
								<span class="red">*</span>&nbsp;Email：
							</td>
							<td align="left">
								<table width="100%" cellspacing="0" cellpadding="0" border="0">
									<tbody>
										<tr>
											<td width="240" height="25">
												<input onblur="ckem($(this))" value="${user?.mememail}" type="text" class="edit_input" id="useremail" name="email">
												<span style="color: Red; display: none;" id="RequiredFieldValidator2">*</span>
											</td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
						<tr>
							<td align="right" height="25">
								<span class="red">*</span>&nbsp;所在地区：
							</td>
							<td align="left">
			                   <select style="width:80px;" onchange="getCities()" id="province" name="province"><option>北京市</option><option>上海市</option><option>天津市</option><option>云南省</option><option>内蒙古自治区</option><option>台湾省</option><option>吉林省</option><option>四川省</option><option>宁夏回族自治区</option><option>安徽省</option><option>山东省</option><option>山西省</option><option>广东省</option><option>广西壮族自治区</option><option>新疆维吾尔自治区</option><option>江苏省</option><option>江西省</option><option>河北省</option><option>河南省</option><option>浙江省</option><option>海南省</option><option>湖北省</option><option>湖南省</option><option>澳门特别行政区</option><option>甘肃省</option><option>福建省</option><option>西藏自治区</option><option>贵州省</option><option>辽宁省</option><option>重庆市</option><option>陕西省</option><option>青海省</option><option>香港特别行政区</option><option>黑龙江省</option></select>
			                   <select style="width:80px;" onchange="getCounties()" id="city" name="city"><option>朝阳区</option><option>东城区</option><option>丰台区</option><option>大兴区</option><option>宣武区</option><option>崇文区</option><option>平谷区</option><option>怀柔区</option><option>房山区</option><option>昌平区</option><option>海淀区</option><option>石景山区</option><option>西城区</option><option>通州区</option><option>门头沟区</option><option>顺义区</option></select>
			               	   <select style="width:120px;" id="county" name="county"><option>三环以内</option><option>三环到四环之间</option><option>四环到五环之间</option><option>五环到六环之间</option><option>管庄</option><option>北苑</option><option>天通苑</option><option>定福庄</option><option>亦庄</option><option>经济技术开发区</option></select>
							</td>
						</tr>
						<tr>
							<td align="right" height="25">
								<span class="red">*</span>&nbsp;详细地址：
							</td>
							<td align="left">
								<input  onblur="ckadr($(this))"  value="${user?.memaddr}" type="text" size="40" class="addr_input" id="adress" name="adress">
								<span style="color: Red; display: none;" id="RequiredFieldValidator3">*</span>
							</td>
						</tr>
						<tr>
							<td align="right" height="25">
								邮政邮编：
							</td>
							<td align="left">
								<input value="${user?.mempoca}" type="text" class="edit_input" id="postcode" name="postcode">
							</td>
						</tr>
						<tr>
							<td align="right" height="25">
								<span class="red">*</span>&nbsp;手机：
							</td>
							<td align="left">
								<table width="100%" cellspacing="0" cellpadding="0" border="0">
									<tbody>
										<tr>
											<td width="240" height="25">
												<input  onblur="ckmobie($(this))"  value="${user?.memtel }" type="text" class="edit_input" id="mobie" name="mobie">
												<span style="color: Red; display: none;" id="RequiredFieldValidator4">*</span>
											</td>

										</tr>
									</tbody>
								</table>
							</td>
						</tr>
						<tr>
							<td align="right" width="100">
								座机：
							</td>
							<td align="left">
								<input value="${user?.mempho }" type="text" class="edit_input" id="tel" name="tel">
							</td>
						</tr>
						<tr>
							<td>
								&nbsp;
							</td>
							<td align="left">
								<table width="100%" cellspacing="0" cellpadding="0" border="0">
									<tbody>
										<tr>
											<td width="240">
												&nbsp;
											</td>
											<td width="100">
												&nbsp;
											</td>
											<td style="padding-left: 10px;"></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<script type="text/javascript">
			var province_value = "";
			var city_value = "";
			var county_value = "";		
			</script>
			<script type="text/javascript">
				$(document).ready(function(){
					getProvinces();
				});
				function getProvinces(){
					var pro = "";
					for(var i = 0 ; i < provinces.length; i++){
						if (provinces[i] == province_value)
							pro += "<option selected='selected'>" + provinces[i] + "</option>";
						else
							pro += "<option>" + provinces[i] + "</option>";
						}
						$('#province').empty().append(pro);
						getCities();
					}
				function getCities(){
					var proIndex = $('#province')[0].selectedIndex;
					showCities(proIndex);
					getCounties();
					getadd($('#province').val());
				}
				function showCities(proIndex){
					var cit = "";
					if(cities[proIndex] == null){
						$('#city').empty();
						return;
					}
					for(var i = 0 ;i < cities[proIndex].length ; i++){
						if (cities[proIndex][i] == city_value)
							cit += "<option selected='selected'>" + cities[proIndex][i] + "</option>";
						else
							cit += "<option>" + cities[proIndex][i] + "</option>";
					}
					$('#city').empty().append(cit);
				}
				function getCounties(){
					var proIndex = $('#province')[0].selectedIndex;
					var citIndex = $('#city')[0].selectedIndex;
					showCounties(proIndex,citIndex);
				}
				function showCounties(proIndex,citIndex){
					var cou = "";
					if(counties[proIndex][citIndex] == null){
						$('#county').empty();
						return;
					}
					for(var i = 0 ;i < counties[proIndex][citIndex].length;i++){
						if (counties[proIndex][citIndex][i] == county_value)
							cou += "<option selected='selected'>" + counties[proIndex][citIndex][i] + "</option>";
						else
							cou += "<option>" + counties[proIndex][citIndex][i] + "</option>";
					}
					$('#county').empty().append(cou);
				}
				
				function getadd(val){
				}
			</script>
		</div>
		<div class="gray_frame">
			<div class="tab_frame">
				<div class="tab_onfocus">
					配送方式
				</div>
			</div>
			<div class="tab_line"></div>
			<div class="pay_line">
				<table width="90%" cellspacing="15" cellpadding="0" border="0">
					<tbody>
						<tr style="" id="fs">
							<td align="left" height="50" colspan="2">
								<span class="bold">送货方式：</span>
							</td>
						</tr>
						<tr>
							<td align="left">
								<table cellpadding="0" border="0" id="postadd">
									<tbody>
										<tr>
											<td align="center" width="25" height="25">
												<input type="radio" checked="true" name="postadd" value="9">
											</td>
											<td align="left">
												快递
											</td>
											<td align="left">
												：
												<span class="price">￥10元</span>
											</td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="clear_frame">
				<table width="90%" cellspacing="15" cellpadding="0" border="0">
					<tbody>
						<tr>
							<td align="left">
								<table width="100%" cellspacing="0" cellpadding="0" border="0">
									<tbody>
										<tr>
											<td height="30" colspan="2">
												<span class="bold">送货时间：</span>
											</td>
										</tr>
										<tr>
											<td width="25" height="30">
												<input type="radio" checked="checked" value="RadioButton2"
													name="songhtime" id="RadioButton2">
											</td>
											<td align="left">
												尽快（工作日、双休日与节假日均可送货）
											</td>
										</tr>
										<tr>
											<td height="30">
												<input type="radio" value="RadioButton3" name="songhtime"
													id="RadioButton3">
											</td>
											<td align="left">
												只工作日送货（双休日与节假日不送货）（注：写字楼/商用地址客户请选择）
											</td>
										</tr>
										<tr>
											<td height="30">
												<input type="radio" value="RadioButton4" name="songhtime"
													id="RadioButton4">
											</td>
											<td align="left">
												只双休日、节假日送货（工作日不用送货）
											</td>
										</tr>
										<tr>
											<td height="30">
												&nbsp;
											</td>
											<td align="left">
												<table width="100%" cellspacing="0" cellpadding="0"
													border="0">
													<tbody>
														<tr>
															<td width="65" height="30">
																特殊说明：
															</td>
															<td width="190">
																<input type="text" class=" reg_input" id="rmark"
																	name="rmark">
															</td>
															<td>
																（不超过15个字）
															</td>
														</tr>
													</tbody>
												</table>
											</td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="gray_frame">
			<div class="tab_frame">
				<div class="tab_onfocus">
					商品信息
				</div>
			</div>
			<div class="tab_line"></div>
			<div class="clear_frame">
				<table width="100%" cellspacing="1" cellpadding="0" border="0" bgcolor="#c1c1c1">
			      <tbody><tr>
			        <td width="90" height="35" bgcolor="#e3e3e3"><div align="center">图书</div></td>
			        <td bgcolor="#e3e3e3"><div align="center">图书名称</div></td>
			        <td width="90" bgcolor="#e3e3e3"><div align="center">作者</div></td>
			        <td width="80" bgcolor="#e3e3e3"><div align="center">数量</div></td>
			      </tr>
			      #{list bookses,as:'car' }
				      <tr>
				        <td align="center" height="90" bgcolor="#ffffff">
				        	<a target="_self" href="/show_${car?.getBoo()?.id }_book.html">
				        		<img width="51" height="69" border="0" src="${car?.getBoo()?.simage }"></a></td>
				        <td align="center" bgcolor="#ffffff"><a href="/show_${car?.getBoo()?.id }_book.html">${car?.getBoo()?.booName}</a></td>
				        <td align="center" bgcolor="#ffffff">${service.BookService.getAuthor(car?.getBoo()?.id)?.autrName}</td>
				        <td bgcolor="#ffffff" align="center" class="row55">
				         	${car?.count }
				        </td>
				      </tr>
			      #{/list}
			      <tr>
			        <td align="right" height="35" bgcolor="#e3e3e3" colspan="9">&nbsp;</td>
			      </tr>
			    </tbody>
			   </table>
			</div>
		</div>
		<div class="clear_frame">
			<table width="100%" cellspacing="20" cellpadding="0" border="0">
				<tbody>
					<tr>
						<td align="right" width="50%" height="25">
							<a class="pay" target="_self" href="/controllers/Order.bookList">返回购物车</a>
						</td>
						<td align="left">
							<input type="image" style="border-width: 0px;" src="/public/orderimg/pay_yes.jpg">
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</form>
<script type="text/javascript">
	var shr = $("#name");
	var em = $("#useremail");
	var adr = $("#adress");
	var mobie = $("#mobie");
	var regtel = /^(1[3,5,8,7]{1}[\d]{9})|(((400)-(\d{3})-(\d{4}))|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{3,7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$/;
	var regEm = /^[0-9a-zA-Z_\-\.]+@[0-9a-zA-Z_\-]+(\.[0-9a-zA-Z_\-]+)*$/;
		
	function ckform(){
		if(ckshr() && ckem() && ckmobie() && ckadr())
			document.orderD.submit();
			
		return false;
	}
	function ckem(){
		//regEm
		if(em.val().trim() == ""){
			em.val("");
			em.focus()
			em.css({border:'1px red solid'});
			$("#RequiredFieldValidator2").text("邮箱不能为空!");
			$("#RequiredFieldValidator2").show();
			return false;
		}else{
			 if(!regEm.test(em.val())){
				em.focus()
				em.css({border:'1px red solid'});
				$("#RequiredFieldValidator2").text("邮箱格式不正确!");
				$("#RequiredFieldValidator2").show();
				return false;
			}else{
				em.attr("style","");
				$("#RequiredFieldValidator2").text("");
				return true;
			}
		}
	}
	function ckmobie(){
		if(mobie.val().trim() == ""){
			mobie.val("");
			mobie.focus()
			mobie.css({border:'1px red solid'});
			$("#RequiredFieldValidator4").text("手机号码不呢为空!");
			$("#RequiredFieldValidator4").show();
			return false;
		}else{
			if(!regtel.test(mobie.val())){
				mobie.focus()
				mobie.css({border:'1px red solid'});
				$("#RequiredFieldValidator4").text("手机号码格式不匹配!");
				$("#RequiredFieldValidator4").show();
				return false;
			}else{
				mobie.attr("style","");
				$("#RequiredFieldValidator4").text("");
				return true;
			}
		}
	}
	function ckadr(){
		if(adr.val().trim() == ""){
			adr.val("");
			adr.focus()
			adr.css({border:'1px red solid'});
			$("#RequiredFieldValidator3").text("详细地址不能为空!");
			$("#RequiredFieldValidator3").show();
			return false;
		}else{
			adr.attr("style","");
			$("#RequiredFieldValidator3").text("");
			return true;
		}
	}
	function ckshr(){
		if(shr.val().trim() == ""){
			shr.focus()
			shr.attr("style","border:1px red solid");
			$("#RequiredFieldValidator1").text("收货人不能为空!");
			$("#RequiredFieldValidator1").show();
			return false;
		}else{
			shr.attr("style","");
			$("#RequiredFieldValidator1").text("");
			return true;
		}
	}
</script>
